<template>
  <!-- 导航部分 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>工装夹具管理</el-breadcrumb-item>
        <el-breadcrumb-item>工装夹具台账</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!--搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form inline>
        <el-form-item label="工装夹具编码">
          <el-input v-model="ledgerQuery.toolLedgerCode"/>
        </el-form-item>
        <el-form-item label="工装夹具名称">
          <el-input v-model="ledgerQuery.toolLedgerName"/>
        </el-form-item>
        <el-form-item label="工装夹具类型">
          <el-input v-model="ledgerQuery.toolLedgerType"/>
        </el-form-item>
        <!--        <el-form-item label="工装夹具类型">-->
        <!--          <el-select style="width: 150px" v-model="ledgerQuery.toolLedgerType"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="品牌">
          <el-input v-model="ledgerQuery.toolLedgerBrand"/>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="ledgerQuery.toolLedgerSpec"/>
        </el-form-item>
        <el-form-item style="width: 150px" label="状态">
          <el-select v-model="ledgerQuery.toolLedgerStatus">
            <el-option value="1" label="在库"/>
            <el-option value="2" label="被领用"/>
            <el-option value="3" label="报废"/>
            <el-option value="4" label="维修中"/>

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadToolLedger" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 工具栏 -->
  <el-row style="margin: 20px">
    <el-col :span="24">
      <el-button type="primary" plain @click="toAdd"><el-icon><Plus /></el-icon>新增</el-button>
      <el-button type="success" plain @click="toUpdate"><el-icon><EditPen /></el-icon>编辑</el-button>
      <el-button type="warning" plain @click="toDeletes"><el-icon><EditPen /></el-icon>删除</el-button>
    </el-col>
  </el-row>

<!--  &lt;!&ndash; 工具栏 &ndash;&gt;-->
<!--  <el-row style="margin: 10px">-->
<!--    <el-col :span="24">-->
<!--      <el-button type="primary" @click="toAdd">新增</el-button>-->
<!--      <el-button type="primary" @click="toUpdate">编辑</el-button>-->
<!--      <el-button type="primary" @click="toDeletes">删除</el-button>-->
<!--    </el-col>-->
<!--  </el-row>-->

  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="tools" border stripe ref="toolTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="toolLedgerCode" label="编码">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.toolLedgerId)" type="success">
              {{scope.row.toolLedgerId}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="toolLedgerName" label="名称"/>
        <el-table-column prop="toolLedgerBrand" label="品牌"/>
        <el-table-column prop="toolLedgerSpec" label="型号"/>
        <el-table-column prop="toolLedgerType" label="类型"/>
        <el-table-column prop="toolInventoryNum" label="库存数量"/>
        <el-table-column prop="toolAvailableNum" label="可用数量"/>
        <el-table-column prop="maintainType" label="保养维护类型"/>
        <el-table-column prop="serviceInterval" label="下次保养周期"/>
        <el-table-column prop="maintainDate" label="下次保养日期"/>
        <el-table-column prop="toolLedgerStatus" label="状态">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.toolLedgerStatus == 1">在库</el-tag>
            <el-tag type="warning" v-if="scope.row.toolLedgerStatus == 2">被领用</el-tag>
            <el-tag type="warning" v-if="scope.row.toolLedgerStatus == 3">报废</el-tag>
            <el-tag type="warning" v-if="scope.row.toolLedgerStatus == 4">维修中</el-tag>

          </template>
        </el-table-column>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link style="margin: 0px 5px" @click="toEdit(scope.row.toolLedgerId)" type="primary">
              <el-icon>
                <EditPen/>
              </el-icon>
              编辑
            </el-link>
            <el-link style="margin: 0px 5px" @click="toDelete(scope.row.toolLedgerId)" type="primary">
              <el-icon>
                <Delete/>
              </el-icon>
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-row style="margin-top: 10px">
    <!-- 监听页码的变化事件 -->
    <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
  </el-row>

  <!-- 新增的弹窗 -->
  <el-dialog v-model="addToolLedgerVisible"
             title="新增工装夹具清单"
             width="50%"
  >
    <el-form :model="newToolLedger">
      <el-form-item label="工装夹具名称">
        <el-input v-model="newToolLedger.toolLedgerName"/>
      </el-form-item>
      <el-form-item label="品牌">
        <el-input v-model="newToolLedger.toolLedgerBrand"/>
      </el-form-item>
      <el-form-item label="型号">
        <el-input v-model="newToolLedger.toolLedgerSpec"/>
      </el-form-item>
<!--      <el-form-item label="工装夹具类型">-->
<!--        <el-input v-model="newToolLedger.toolLedgerType"/>-->
<!--      </el-form-item>-->
      <el-form-item label="工装夹具类型">
        <el-select v-model="newToolLedger.toolTypeId"/>
        <el-option
          v-for="t in type"
          :key="t.toolTypeId"
          :label="t.toolTypeName"
          :value="t.toolTypeId">
          </el-option>
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="newToolLedger.toolInventoryNum"/>
      </el-form-item>
      <el-form-item label="可用数量">
        <el-input v-model="newToolLedger.toolAvailableNum"/>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="下一次保养日期">
            <el-date-picker
                v-model="newToolLedger.maintainDate"
                type="date"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-form-item label="下一次保养日期">-->
<!--        <el-input v-model="newToolLedger.maintainDate"/>-->
<!--      </el-form-item>-->
      <el-form-item label="状态">
        <el-select v-model="newToolLedger.toolLedgerStatus">
          <el-option value="1" label="在库"/>
          <el-option value="2" label="被领用"/>
          <el-option value="3" label="报废"/>
          <el-option value="4" label="维修中"/>
        </el-select>
      </el-form-item>
      <el-form-item label="保养维护类型">
        <el-radio-group v-model="newToolLedger.maintainType">
          <el-radio value="定期维护" size="large">定期维护</el-radio>
          <el-radio value="按使用次数维护" size="large">按使用次数维护</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="newToolLedger.toolLedgerNotes"/>
      </el-form-item>
    </el-form>
    <el-button @click="addToolLedgerVisible =false" newPlan={}>取消</el-button>
    <el-button type="primary" @click="addToolLedger">
      确定
    </el-button>
  </el-dialog>

<!--  <el-dialog v-model="addToolLedgerVisible"-->
<!--             title="新增台账"-->
<!--             width="50%"-->
<!--             >-->
<!--    <el-form :model="newToolLedger">-->
<!--      <el-form-item label="编码">-->
<!--        <el-input v-model="newToolLedger.toolLedgerCode"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="名称">-->
<!--        <el-input v-model="newToolLedger.toolLedgerName"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="备注">-->
<!--        <el-input v-model="newToolLedger.toolLedgerNotes"/>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    <el-button @click="addToolLedgerVisible=false" newToolLedger={}>取消</el-button>-->
<!--    <el-button type="primary" @click="addToolLedger">确定</el-button>-->
<!--  </el-dialog>-->

  <ToolLedgerEdit :toolLedgerId="updateToolLedgerId" @editComplate="loadToolLedger"/>

  <ledgerDetail :toolLedgerId="detailToolLedgerId"/>

</template>

<script setup>
import {onMounted, ref} from "vue";
import toolsLedgerRequest from "@/api/toolsLedger.js";
import {ElMessage, ElMessageBox} from "element-plus";
import ToolLedgerEdit from "@/views/tools/toolTypeLedgerEdit.vue";
import ledgerDetail from "@/views/tools/toolTypeLedgerDetail.vue";
import {EditPen} from "@element-plus/icons-vue";
let ledgerQuery = ref({});
let tools = ref([]);
let curPage = ref(1);
let total = ref(10);
let toolTable = ref([]);
let addToolLedgerVisible = ref(false);
let newToolLedger = ref({});
let updateToolLedgerId = ref(-1);
let detailToolLedgerId = ref(-1);
let type = ref({});
function loadType(){
  toolsLedgerRequest.selectByType(res=>{
    type.value = res.data;
  })
}
//显示详情
function showDetail(toolLedgerId){
  detailToolLedgerId.value=toolLedgerId;
}
//工具栏删除
function toDeletes() {
  let selectionRows = toolTable.value.getSelectionRows();
  if (selectionRows.length == 0) {
    ElMessage({
      type: "warning",
      message: "请选择数据"
    })
    return;
  }
  ElMessageBox.confirm(
      '您确定要删除吗？',
      'warning',
      {
        confirmButtonClass: '是的',
        cancelButtonClass: '取消',
        type: 'warning',
      }
  ).then(() => {
    selectionRows.forEach(row => {
      toolsLedgerRequest.delete(row.toolLedgerId, res => {
        if (res.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          })
        } else {
          ElMessage({
            type: "warning",
            message: "删除失败",
          })
        }
      })
    })
    loadToolLedger();
  })
}

//工具栏新增
function toAdd() {
  loadType();
  console.log(type);
  addToolLedgerVisible.value = true;
}

//工具栏新增按钮
function addToolLedger() {
  toolsLedgerRequest.addToolLedger(newToolLedger,res=>{
    if (res.code == 200){
      ElMessage({
        type:"success",
        message:"添加成功"
      })
    }else {
      ElMessage({
        type:"warning",
        message:"添加失败"
      })
    }
    newToolLedger.value = {};
    addToolLedgerVisible.value =false;
    loadToolLedger();
  })
}

//工具啦编辑
function toUpdate() {
  let selectionRows = toolTable.value.getSelectionRows();
  if (selectionRows.length > 1){
    ElMessage({
      type:"warning",
      message:"只能选择一条数据"
    })
  }else if(selectionRows.length == 0){
    ElMessage({
      type:"warning",
      message:"请选择数据"
    })
  }else{
    toEdit(selectionRows[0].toolLedgerId);
  }
}

//行编辑
function toEdit(toolTypeId) {
  updateToolLedgerId.value=toolTypeId;
}

//行删除
function toDelete(toolLedgerId) {
  ElMessageBox.confirm(
      '您确定要删除吗',
      'Warning',
      {
        confirmButtonClass: '是的',
        cancelButtonClass: '取消',
        type: 'warning',
      }
  ).then(() => {
    toolsLedgerRequest.delete(toolLedgerId, res => {
      if (res.code == 1) {
        ElMessage({
          type: "success",
          message: "操作完成"

        })
        loadToolLedger();
      } else {
        ElMessage({
          type: "warning",
          message: "删除失败"
        })
      }
    })
    loadToolLedger();
  })
}

function loadToolLedger() {
  toolsLedgerRequest.loadToolLedger(ledgerQuery.value, curPage.value, 10, res => {
    total.value = res.data.total;
    tools.value = res.data.list;
  })
}

function changePage(value) {
  curPage.value = value;
  loadToolLedger();
}

onMounted(() => {
  loadToolLedger();
})
</script>

<style scoped>

</style>
<!--<template>-->
<!--  <h2>123</h2>-->
<!--</template>-->